// src/views/teacher/QuestionCenter.vue

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <el-icon><Comment /></el-icon>
        <span style="margin-left: 8px;">问题中心</span>
      </div>
    </template>
    <el-tabs v-model="activeTab" class="question-tabs" v-loading="loading">
      <el-tab-pane name="unanswered">
        <template #label>
          <el-badge :value="unansweredQuestions.length" class="item" :hidden="unansweredQuestions.length === 0">
            <span>待回答</span>
          </el-badge>
        </template>
        <div v-if="unansweredQuestions.length > 0" class="question-list">
           <el-card v-for="q in unansweredQuestions" :key="q.id" class="question-card" shadow="hover">
              <p><strong>课程:</strong> {{ q.courseName }}</p>
              <p><strong>提问者:</strong> {{ q.studentName }} <span class="question-time">{{ q.time }}</span></p>
              <p class="question-content">{{ q.content }}</p>
              <el-button type="primary" size="small">去回答</el-button>
           </el-card>
        </div>
        <el-empty v-else description="暂无待回答的问题" />
      </el-tab-pane>

      <el-tab-pane label="已回答" name="answered">
        <div v-if="answeredQuestions.length > 0" class="question-list">
           <el-card v-for="q in answeredQuestions" :key="q.id" class="question-card" shadow="hover">
              <p><strong>课程:</strong> {{ q.courseName }}</p>
              <p><strong>提问者:</strong> {{ q.studentName }} <span class="question-time">{{ q.time }}</span></p>
              <p class="question-content">{{ q.content }}</p>
              <el-button type="info" plain size="small">查看回答</el-button>
           </el-card>
        </div>
         <el-empty v-else description="暂无已回答的记录" />
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import questionService from '../../services/questionService'; // --- (1) 导入服务 ---

const activeTab = ref('unanswered'); //
const loading = ref(true); // 添加加载状态

// --- 模拟数据已被移除 ---
const unansweredQuestions = ref([]); //
const answeredQuestions = ref([]); //

// --- (2) 创建一个方法来获取数据 ---
const fetchAllQuestions = async () => {
  try {
    loading.value = true;
    // 使用 Promise.all 来并发获取两组数据，以提升性能
    const [unanswered, answered] = await Promise.all([
      questionService.getQuestions('unanswered'),
      questionService.getQuestions('answered')
    ]);
    
    unansweredQuestions.value = unanswered;
    answeredQuestions.value = answered;

  } catch (error) {
    ElMessage.error(error.message || '获取问题列表失败');
  } finally {
    loading.value = false;
  }
};


// --- (3) 在组件挂载时调用获取数据的方法 ---
onMounted(() => {
  fetchAllQuestions();
});

</script>

<style scoped>
.card-header {
  display: flex;
  align-items: center;
  font-weight: bold;
}
.question-tabs .el-badge {
  margin-right: 8px;
}
.question-list {
  display: flex;
  flex-direction: column;
  gap: 15px; /* 卡片之间的间距 */
}
.question-card p {
  margin: 0 0 10px 0;
}
.question-time {
  float: right;
  color: #909399;
  font-size: 14px;
}
.question-content {
  color: #303133;
  font-weight: 500;
}
</style>